이 글에서는 Zustand의 소스 코드에서 Object.ass()가 어떻게 사용되는지 이해할 것입니다.

위의 코드 조각은 Vanilla.ts에서 가져온 것입니다. 상태를 설정하면 상태 개체를 업데이트하는 데 Object.Assign이 사용됩니다.

먼저 Object.할당의 기본 사항을 이해해 보겠습니다.

객체.할당()

Object.sign() 정적 메서드는 하나 이상의 소스 객체에서 열거 가능한 모든 자체 속성을 대상 객체로 복사합니다. 수정된 대상 객체를 반환합니다.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// Expected output: true

대상 객체의 b 값이 소스 객체의 b 값으로 대체됩니다.

정말 간단하죠? 이제 몇 가지 실험을 실행하고 Zusstand의 setState가 Object.sign() 메소드를 활용하는 방법을 이해해 보겠습니다.

Zustand 소스 코드의 Object.sign():

// pulled from: https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76
state = (replace != null ? 
              replace : 
              typeof nextState !== "object" || 
              nextState === null) ? 
                nextState : 
                Object.assign({}, state, nextState);

위 코드 조각에는 중첩된 삼항 연산자가 있습니다. 교체가 null이 아니면 상태가 교체되거나 nextState가 객체가 아닌 경우 nextState를 있는 그대로 반환하지만 우리가 관심 있는 것은 Object.sign({}, state, newState).

먼저 상태를 업데이트할 때 상태와 nextState에 무엇이 있는지 로그하고 살펴보겠습니다. 내가 선택한 예는 Zustand 소스 코드의 데모 예에서 나온 것입니다. 콘솔 명령문을 삽입하고 이러한 실험을 실행할 수 있도록 코드를 약간 수정했습니다.

이 간단한 예에서 카운트가 증가하면 Object.sign을 사용하여 상태 객체를 업데이트하게 됩니다.

다음번에는 JSON 객체에 대한 일부 업데이트를 수행하려고 할 때 Object.sign을 사용하세요.

회사 소개:

Think Throo에서는 오픈 소스 프로젝트에서 영감을 받은 모범 사례를 가르치는 임무를 수행하고 있습니다.

Next.js/React에서 고급 아키텍처 개념을 연습하여 코딩 기술을 10배 높이고, 모범 사례를 배우고, 프로덕션급 프로젝트를 구축하세요.

저희는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo (별표를 주세요!)

귀사의 비즈니스를 위한 맞춤형 웹 시스템을 구축하고 싶으십니까? [email protected]으로 문의하세요

저자 정보:

안녕하세요, 저는 램입니다. 저는 열정적인 소프트웨어 엔지니어/OSS Tinkerer입니다.

내 웹사이트를 확인하세요: https://www.ramunarasinga.com/

참고자료:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/할당